<template>
  <div class="bar">
    <t-row justify="space-between">
      <div class="tip">
        <t-icon name="error-circle" size="large" /> {{ lang.t('tip') }}
      </div>
      <t-button theme="primary" :loading="loading" @click="form.submit()">
        <template #icon><t-icon name="check" /></template>
        {{ lang.t('botton') }}
      </t-button>
    </t-row>
  </div>
  <div class="box page-user-config">
    <div class="left-box" style="padding-right: 20px">
      <div class="bg-box">
        <div class="title">{{ lang.t('title.user') }}</div>
        <div class="item wrap"><span>{{ lang.t('email') }}</span> {{ formData.email }}</div>
        <div class="item wrap"><span>{{ lang.t('number') }}</span> {{ formData.number }}</div>
        <div class="item"><span>{{ lang.t('stop_at') }}</span> <b>{{ formData.stop_at }}</b></div>
        <Upload v-model="formData.logo">
          <template #default="scope">
            <t-loading :loading="scope.loading" show-overlay>
              <div class="logo" @click="scope.click">
                <img v-if="formData.logo" :src="app.img(formData.logo)" />
                <span v-else>
                  <t-icon name="upload" size="large"/> {{ lang.t('logo') }}
                </span>
              </div>
            </t-loading>
          </template>
        </Upload>
      </div>
    </div>
    <div class="box">
      <t-form ref="form" :data="formData" :rules="formRule" label-align="top" @submit="onSubmit">
        <div class="bg-box">
          <div class="title" style="padding-bottom: 25px">{{ lang.t('title.base') }}</div>
          <t-row :gutter="20">
            <t-col :span="3">
              <t-form-item :label="lang.t('name')" name="name">
                <t-input v-model="formData.name"></t-input>
              </t-form-item>
            </t-col>
            <t-col :span="3">
              <t-form-item :label="lang.t('phone')" name="phone">
                <t-input v-model="formData.phone"></t-input>
              </t-form-item>
            </t-col>
            <t-col :span="3">
              <t-form-item :label="lang.t('password')" name="password">
                <t-input v-model="formData.password" type="password"></t-input>
              </t-form-item>
            </t-col>
          </t-row>
        </div>
        <div class="bg-box">
          <div class="title" style="padding-bottom: 25px">{{ lang.t('title.city') }}</div>
          <t-row :gutter="20">
            <t-col :span="3">
              <t-form-item :label="lang.t('country')" name="country">
                <t-select v-model="formData.country">
                  <t-option v-for="item in countryData" :key="item.id" :value="item.name" :label="item.name"></t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :span="3">
              <t-form-item :label="lang.t('city')" name="city">
                <t-input v-model="formData.city"></t-input>
              </t-form-item>
            </t-col>
            <t-col :span="3">
              <t-form-item :label="lang.t('area')" name="area">
                <t-input v-model="formData.area"></t-input>
              </t-form-item>
            </t-col>
            <t-col :span="3">
              <t-form-item :label="lang.t('zip')" name="zip">
                <t-input v-model="formData.zip"></t-input>
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="lang.t('address')" name="address" style="margin-top: 20px;">
                <t-input v-model="formData.address"></t-input>
              </t-form-item>
            </t-col>
          </t-row>
        </div>
        <div class="bg-box">
          <div class="title" style="padding-bottom: 25px">{{ lang.t('title.bank') }}</div>
          <t-row :gutter="20">
            <t-col :span="3">
              <t-form-item :label="lang.t('tax')" name="tax">
                <t-input v-model="formData.tax"></t-input>
              </t-form-item>
            </t-col>
            <t-col :span="3">
              <t-form-item :label="lang.t('bank')" name="bank">
                <t-input v-model="formData.bank"></t-input>
              </t-form-item>
            </t-col>
            <t-col :span="3">
              <t-form-item :label="lang.t('bank_name')" name="bank_name">
                <t-input v-model="formData.bank_name"></t-input>
              </t-form-item>
            </t-col>
            <t-col :span="3">
              <t-form-item :label="lang.t('bank_user')" name="bank_user">
                <t-input v-model="formData.bank_user"></t-input>
              </t-form-item>
            </t-col>
          </t-row>
        </div>
      </t-form>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import userStore from '@/store/user'
  import { country } from '@/api/manage'
  import Upload from '@/components/upload.vue'
  
  const lang = app.lang.space('page.user.config')

  const form = ref({})
  const formData = ref(Object.assign({}, userStore.getData()))
  const formRule = {
    name: [{ required: true, message: ' ', type: 'error' }],
    phone: [{ required: true, message: ' ', type: 'error' }],
    country: [{ required: true, message: ' ', type: 'error' }],
    city: [{ required: true, message: ' ', type: 'error' }],
    area: [{ required: true, message: ' ', type: 'error' }],
    address: [{ required: true, message: ' ', type: 'error' }],
    zip: [{ required: true, message: ' ', type: 'error' }]
  }

  // 加载配置
  const getData = () => {
    userStore.get().then(res => {
      formData.value = Object.assign({ 
        password: '' 
      }, res)
    })
  }

  // 提交配置
  const loading = ref(false)
  const onSubmit = ({ validateResult }) => {
    if (validateResult === true) {
      loading.value = true
      userStore.update(formData.value).then(res => {
        app.message('success', 'message.' + res.message)
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }

  // 加载城市
  const countryData = ref([])
  country().then(res => countryData.value = res)

  getData()
</script>

<style lang="scss">
  @import '@/style/global';

  .page-user-config{
    .title{
      color: $color-title;
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 20px;
    }
    .logo{
      width: 100%;
      margin: 30px auto 0;
      border: 1px $color-bg solid;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      span{
        display: block;
        color: $color-body;
        font-size: 14px;
        line-height: 200px; 
        text-align: center;
      }

      img{
        width: 80%;
        display: block;
        margin: 25px auto;
      }
    }

    .item{  
      color: $color-title;
      font-size: 14px;
      line-height: 20px;
      margin-bottom: 10px;
      text-align: right;
      
      span{
        color: $color-body;
        float: left;
        padding-right: 20px;
      }

      b{
        color: $color;
        font-weight: normal;
      }
    }
  }
</style>